import React, { useCallback, useMemo } from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import Header from '../common/Header';
import CitySelector from '../common/CitySelector';
import DateSelector from '../common/DateSelector';
import DepartDate from './DepartDate';
import HighSpeed from './HighSpeed';
import Joureny from './Joureny';
import Submit from './Submit';
import {
    exchangeFromTo,
    showCitySelector,
    showDateSelector,
    hideCitySelector,
    hideDateSelector,
    setSelectedCity,
    fetchCityData,
    setDepartDate,
    toggleHighSpeed
} from './actions';
import { h0 } from '../common/fp';
import './App.css';

function App(props) {
    const {
        dispatch,
        from,
        to,
        isCitySelectorVisible,
        isDateSelectorVisible,
        cityData,
        departDate,
        highSpeed,
        isLoadingCityData
    } = props;
	const onBack = useCallback(() => {
		window.history.back();
    }, []);
    const cbs = useMemo(() => {
        return bindActionCreators({
            exchangeFromTo,
            showCitySelector,
        }, dispatch);
    }, []);
    const citySelectorCbs = useMemo(() => {
        return bindActionCreators({
            onBack: hideCitySelector,
            onSelect: setSelectedCity,
            fetchCityData
        }, dispatch);
    }, []);
    const departDateCbs = useMemo(() => {
        return bindActionCreators({
            onClick: showDateSelector
        }, dispatch);
    }, []);
    const dateSelectorCbs = useMemo(() => {
        return bindActionCreators({
            onBack: hideDateSelector
        }, dispatch);
    }, []);
    const highSpeedCbs = useMemo(() => {
        return bindActionCreators({
            toggle: toggleHighSpeed
        }, dispatch);
    }, []);
    const onSelectDate = useCallback((day) => {
        if (!day || day < h0()) return;
        dispatch(setDepartDate(day));
        dispatch(hideDateSelector());
    }, []);
    return (
        <div>
            <div className="header-wrapper">
                <Header title="火车票" onBack={onBack} />
                <form action="./query.html" className="form">
                    <Joureny
                        from={from}
                        to={to}
                        {...cbs}
                    />
                    <DepartDate
                        time={departDate}
                        {...departDateCbs}
                    />
                    <HighSpeed
                        highSpeed={highSpeed}
                        {...highSpeedCbs}
                    />
                    <Submit />
                </form>
            </div>
            <CitySelector
                show={isCitySelectorVisible}
                cityData={cityData}
                isLoading={isLoadingCityData}
                {...citySelectorCbs}
            />
            <DateSelector
                show={isDateSelectorVisible}
                {...dateSelectorCbs}
                onSelect={onSelectDate}
            />
        </div>
    )
}

export default connect(
	function mapStateToProps(state) {
		return state;
	}, 
	function mapDispatchToProps(dispatch) {
		return { dispatch };
	}
)(App);
